<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>滚轮的事件</title>
        <script type="text/javascript">
            window.onload = function(){
                /* 当鼠标滚轮向下滚动时，box1变长；当向上滚动时，box1缩短 */
                /*onmousewheel：鼠标滚轮滚动事件(不支持火狐)；
                  DOMMouseScroll：火狐中的滚轮滚动事件,该方法需要通过
                  addEventLenster()来绑定 */
                var box1 = document.getElementById("box1");
                box1.onwheel = function(event){
                    event = event || window.event;
                    //通过event的属性判断鼠标滚轮滚动的方向
                   /*  event.deltaY : 获取鼠标滚轮滚动的方向，
                       不看大小，只看正负，向下正值，向上负值*/
                    if(event.deltaY > 0)
                        box1.style.height = box1.clientHeight + 10 + "px";
                    else
                        box1.style.height = box1.clientHeight - 10 + "px";    
                    /*(1)当鼠标滚轮滚动时，如果浏览器带有滚动条，则滚动条会随之滚动，
                         这是浏览器的默认行为，可通过 return false 取消其默认行为;
                      (2)但是使用addEventLenster()绑定的响应函数，不能通过return false
                         方法取消其默认行为,而是通过event.preventDefault()来取消默认行为
                         event.preventDefault();  */
                    return false;   
                       
                };
                bind(box1, "DOMMouseScroll", box1.onwheel);
            };

            function bind(obj, eventStr, callback){
                if(obj.addEventListener)
                //大部分浏览器的兼容方式
                    return obj.addEventListener(eventStr, callback, false);
                else
                    //IE8的兼容方式    
                /* 在匿名函数中调用回调函数
                (因为两种方法的this指向不同，而且callback函数是由浏览器调用的，
                为了能够更改this的指向，这里让浏览器调用匿名函数，而在匿名函数中，
                我们就可以操作调用回调函数了，从而改变this的指向) */
                    return obj.attachEvent("on"+eventStr, function(){
                        callback.call(obj);
                    });    
            }
        </script>

        <style type="text/css">
            #box1{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body style="height: 1000px;">
        <div id="box1"></div>
    </body>

</html>